<template>
<div class="home">
    <el-card>
      <div class="h-title">欢迎来到机器学习中心</div>
      <div class="h-con">一站式人工智能平台，包含可视化建模、Notebook建模、在线模型服务，多维度产品形态满足您的不同需求，提供基于多种云端计算资源上的强大计算能力。</div>
    </el-card>
    <title-box title="模型训练"></title-box>
    <el-card>
      <div class="h-m-top">
          <el-button type="text">可视化建模</el-button>
          <el-button type="primary">项目列表</el-button>
      </div>
      <div class="h-m-con">
            <el-col class="items" :span="8" v-for="(item, i) in items" :key="i">
              <div class="h-m-c-item">
                  <span class="h-m-c-i-num">{{item.num}}</span>
                  <span class="h-m-c-i-name"><i :class="`iconfont ${item.icon}`"></i>{{item.name}}</span>
              </div>
            </el-col>
      </div>
    </el-card>
    <title-box title="当前项目实验执行情况">
        <el-date-picker
            slot="item"
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
    </title-box>
    <div style="background:#ffffff;">
        <ve-line :data="chartData"></ve-line>
    </div>
</div>
</template>

<script>
import TitleBox from '@/components/TitleBox'
export default {
    name: 'Home',
    components: { TitleBox },
    data () {
        return {
            time: [],
            items: [
                { num: 23, icon: 'icon-moxingguanli', name: '项目总数' },
                { num: 33, icon: 'icon-moxingguanli', name: '实验总数' },
                { num: 43, icon: 'icon-moxingguanli', name: '运行中的实验数' }
            ],
            chartData: {
                columns: ['日期', '访问用户', '下单用户', '下单率'],
                rows: [
                    { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
                    { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
                    { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
                    { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
                    { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
                    { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
                ]
            }
        }
    },
    methods: {}
}
</script>

<style lang="less">
.home {
    .h-m-con {
        display: flex;
        padding: 10px 20px;
        .h-m-c-item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            .h-m-c-i-num {
                padding-bottom: 15px;
                font-size: 24px;
            }
            i {
                margin-right: 5px;
            }
        }
        .items:nth-child(2) .h-m-c-item {
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
        }
    }
    .h-title {
        line-height: 40px;
        color: #464d5f;
        font-size: 16px;
    }
    .h-con {
        padding-left: 20px;
    }
    .h-m-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
